<div class="dyn-header padding-lr-header">
  <nav>
    <div class="nav-wrapper">
      <a href="#" data-activates="mobile-demo" class="button-collapse"><i class="fa fa-bars"></i></a>

      <ul class="left hide-on-med-and-down">
        <li><a class="waves-effect waves-dark" ui-sref="home" ui-sref-active="active">Home</a></li>
      </ul>
      <ul class="right hide-on-med-and-down">
        <li ng-hide="isAuth"><a class="waves-effect waves-dark" ui-sref="auth.signup" ui-sref-active="active">Sign Up</a></li>
        <li ng-hide="isAuth"><a class="waves-effect waves-dark" ui-sref="auth.login" ui-sref-active="active">Log In</a></li>
        <!-- show after authenticate user -->
        <li ng-show="isAuth"><a class="waves-effect waves-dark" ui-sref="web.dashboard" ui-sref-active="active">Dashboard</a></li>
        <li ng-show="isAuth">
          <a ng-init="main.profileDropdown($event)" class="dropdown-button waves-effect waves-dark" data-activates='ev-dropdown' ui-sref-active="active">Hi {{main.user.name}}! &nbsp; <i class="fa fa-caret-down text-light-gray icon"></i></a>
        </li>
      </ul>

      <ul id="ev-dropdown" class="dropdown-content">
        <li><a class="waves-effect waves-dark" ui-sref="web.change-password"> Change Password </a></li>
        <li><a class="waves-effect waves-dark" href="#!">Update Profile</a></li>
        <li><a class="waves-effect waves-dark" ng-click="logout()">Logout</li>
      </ul>

      <ul class="side-nav" id="mobile-demo">
        <li>
          <div class="userView">
            <div class="background"></div>
            <a><span class="white-text name">EvalAI</span></a>
          </div>
        </li>
        <li><a class="waves-effect waves-dark" ui-sref="home" ui-sref-active="active"><i class="fa fa-home"></i>Home</a></li>
        <li ng-if="!isAuth"><a class="waves-effect waves-dark main-header-link" ui-sref="web.challenge-main"><i class="fa fa-fire"></i>All Challenges</a></li>
        <li ng-hide="isAuth"><a class="waves-effect waves-dark" ui-sref="auth.signup" ui-sref-active="active"><i class="fa fa-sign-out"></i>Sign Up</a></li>
        <li ng-hide="isAuth"><a class="waves-effect waves-dark" ui-sref="auth.login" ui-sref-active="active"><i class="fa fa-sign-in"></i>Log In</a></li>
        <!-- show after authenticate user -->
        <li ng-show="isAuth"><a class="waves-effect waves-dark" ui-sref="web.dashboard" ui-sref-active="active"><i class="fa fa-thumb-tack"></i>Dashboard</a></li>
        <li ng-show="isAuth"><a class="waves-effect waves-dark" ui-sref="web.profile" ui-sref-active="active"><i class="fa fa-user"></i>Hi {{main.user.name}}!</a></li>
      </ul>

    </div>
  </nav>
</div>
